import { Breadcrumb, Affix, Input, Button, message, Popconfirm } from 'antd';
import { useState, useEffect } from 'react';
import { NavLink } from 'umi';
import { getTagApi, addTagApi, putTagApi, delTagApi } from '@/services/ant-design-pro/api'
import ProCard from '@ant-design/pro-card';
import styles from './style.less';
export default function Index() {
  const [top,] = useState(40);
  const [caname, setca] = useState('');
  const [caval, setval] = useState('');
  // id值
  const [ids, setids] = useState('');
  // flag
  const [flag, setflag] = useState(false);
  // 分类数据
  const [data, setdata] = useState<any[]>([]);
  const initdata = async () => {
    let res = await getTagApi();
    setdata(res.data);
  }
  useEffect(() => {
    initdata();
  }, []);
  const setname = (e: any) => {
    setca(e.target.value)
  }
  const setvals = (e: any) => {
    setval(e.target.value)
  }
  // 保存
  const save = async () => {
    let data = { label: caname, value: caval };
    if (flag) {
      let res = await putTagApi(ids, data);
      if (res.success) {
        message.success('修改成功');
      }
    }
    else {
      let res = await addTagApi(data);
      if (res.success) {
        message.success('添加成功');
      }
    }
    initdata();
  }
  // det msg
  const detail = (item: any) => {
    return () => {
      setflag(true);
      // 设置label
      setca(item.label);
      // 设置val      
      setval(item.value);
      // ids
      setids(item.id);
      initdata();
      setca('');
      setval('');
    }
  }
  // 删除
  const delCate = async () => {
    let res = await delTagApi(ids);
    if (res.success) {
      message.success('删除成功')
    }
    initdata();
    setflag(false);
    setca('');
    setval('');
  }
  const confirm = ()=>{
    delCate();
  }
  return (
    <div className={styles.fl}>
      <div style={{ marginBottom: 20 }}>
        <Affix offsetTop={top}>
          <ProCard >
            <Breadcrumb>
              <Breadcrumb.Item><NavLink to='/home'>工作台</NavLink></Breadcrumb.Item>
              <Breadcrumb.Item><NavLink to='/form/basic-form'>所有文章 </NavLink></Breadcrumb.Item>
              <Breadcrumb.Item><NavLink to='/form/advanced-form'>标签管理 </NavLink></Breadcrumb.Item>
            </Breadcrumb>
          </ProCard>
        </Affix>
      </div>
      <div className={styles.down}>
        <ProCard title='管理标签' style={{ width: '40%', height: 'auto', marginRight: '40px' }}>
          <Input value={caname} onChange={setname} placeholder='输入分类名称' style={{ margin: '30px 0px' }}></Input>
          <Input value={caval} onChange={setvals} placeholder='输入分类值（请输入英文值,作为路由使用）' ></Input>
          <Button onClick={save} style={{ margin: '40px 10px' }} type='primary'>{flag ? '更新' : '保存'}</Button>
          {flag ?
            <div style={{ display: 'inline-block' }}>
              <Button style={{ marginRight: '140px' }} onClick={() => {
                setflag(false)
                setca('');
                setval('');
              }}>返回添加</Button>
              <Popconfirm
                title="确认删除?"
                onConfirm={confirm}
                okText="删除 "
                cancelText="取消"
              >
             <Button type='primary'>删除</Button>
              </Popconfirm>
             
            </div>
            : null
          }
        </ProCard>

        <ProCard title='所有标签' style={{ width: '60%', height: 'auto' }}>
          {data.length && data.map(item => {
            return <Button onClick={detail(item)} key={item.id} style={{ margin: '10px 10px' }}>{item.label}</Button>
          })}
        </ProCard>
      </div>
    </div>
  )
}
